<template>
	<div class="dot">
		<i :style="style"></i>
		<div :style="'color:'+textColor">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: "dot",
		components: {},
		props: {
			width: {
				type: Number,
				defalut: 8
			},
			color: {
				type: String,
				defalut: "#fff"
			},
			textColor: {
				type: String,
				defalut: "#323232"
			}
		},
		data() {
			return {};
		},
		watch: {},
		computed: {
			style() {
				return `width:${this.width}px;height:${this.width}px;background-color: ${this.color};`;
			}
		},
		methods: {},
		created() {},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
	.dot {
		@include shrink;
		@include flex(space-between, center);
		i {
			@include shrink;
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 100%;
			margin-right: 8px;
		}
	}
</style>